/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Window 2.0
import QtQml.Models 2.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

ListView {
    id: listView
    anchors.fill: parent
    snapMode: ListView.SnapOneItem
    model: modelManager.launcherModel
    orientation: ListView.Horizontal
    highlightRangeMode: ListView.StrictlyEnforceRange
    boundsBehavior:Flickable.StopAtBounds
    delegate:
        DropArea {
            width: listView.width
            height: listView.height

            Rectangle {
              id: parentRect
              width: listView.width
              height: listView.height
              color: index%2 ? "grey":"yellow"

              Label{
                  anchors.centerIn: parent
                  font.pointSize: 100
                  text: index
              }
              GridView {
                  id: gridview
                  width: 400
                  height: 400
                  cellWidth: 80
                  cellHeight: 80
                  interactive: true
                  model: modelData

                  add: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  addDisplaced: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  move: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  moveDisplaced: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  remove: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  removeDisplaced: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  displaced: Transition {
                      NumberAnimation { properties: "x,y"; duration: 500 }
                  }
                  delegate:
                      DropArea {
                      id: dragArea
                      width: 80
                      height: 80

                      onEntered: {
                          console.log(drag.source.visualIndex, drag.source.pageIndex,
                                      visualIndex, pageIndex)
                          if (drag.source.pageIndex !== pageIndex) {
                              modelManager.moveItem(drag.source.visualIndex, drag.source.pageIndex,
                                                    visualIndex, pageIndex)
                          }
                      }
                      onDropped: {
                            console.log("===onDropped")
                      }


                      property int visualIndex: model.index
                      property int pageIndex: modelData.pageIndex

                      Binding { target: item; property: "visualIndex"; value: visualIndex }
                      Binding { target: item; property: "pageIndex"; value: pageIndex }

                      MouseArea {
                          id: mouseAreaHandle
                          property int pageIndex: model.modelData.pageIndex
                          property int visualIndex: visualIndex
                          property bool held: false
                          property bool changed: false
                          drag.target: item
                          hoverEnabled: true
                          width: listView.width
                          height: listView.height
                          onPositionChanged:  {
                              console.log("移动的矩形x坐标:  " + item.mapToItem(listView,0,0))
                              var pos = item.mapToItem(listView,0,0)
                              console.log("pos.x: " + pos.x)
                              if (item.x >= 400 && !changed) {
                                  listView.currentIndex++
                                  changed = true
                                  console.log("currentIndex" + listView.currentIndex)
                              }
                              if (item.x < 0 && !changed) {
                                  listView.currentIndex--
                                  changed = true
                                  console.log("currentIndex" + listView.currentIndex)
                              }
                          }
                      }

                      Rectangle {
                          id: item
                          width: 72
                          height: 72
                          color: modelData.name
                          property int visualIndex: 0
                          property int pageIndex: 0

                          Text {
                              id: text
                              text: index
                          }

                          anchors {
                              horizontalCenter: parent.horizontalCenter
                              verticalCenter: parent.verticalCenter
                          }

                          DragHandler {
                              id: dragHandler
                          }

                          Drag.active: dragHandler.active
                          Drag.source: item
                          Drag.hotSpot.x: 36
                          Drag.hotSpot.y: 36

                          states: [
                              State {
                                  when: item.Drag.active
                                  ParentChange {
                                      target: item
                                      parent: listView
                                  }

                                  AnchorChanges {
                                      target: item
                                      anchors.horizontalCenter: undefined
                                      anchors.verticalCenter: undefined
                                  }
                              }
                          ]
                      }
               }
            }
        }
    }
}



